import { useState } from 'react';
import { getData5 } from '../Data'
import { useMount, useReactive } from 'ahooks';

import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid';
import { GroupRow } from '@grapecity/wijmo.grid';

import { CollectionView, PropertyGroupDescription, Globalize, toggleClass } from "@grapecity/wijmo";

const WijmoI04 = () => {

    const InitData = useReactive({
        init: null
    })

    const [Data, setData] = useState()
    useMount(() => {
        setData(new CollectionView(getData5(100), {
            groupDescriptions: [new PropertyGroupDescription('上聚合数据', () => ''), 'country']
        }))
    })

    const init = (init) => {
        InitData.init = init
        init.collapseGroupsToLevel(1)
        init.formatItem.addHandler((s, e) => {
            if (e.panel == s.cells) {
                let r = s.rows[e.row],
                    c = s.columns[e.col],
                    item = s.rows[e.row].dataItem,
                    group = r instanceof GroupRow ? item : null,
                    negative = false
                if (c.binding == 'profit') {
                    let profit = group ? group.getAggregate('Sum', 'sales') - group.getAggregate('Sum', 'expenses') : item.sales - item.expenses;
                    e.cell.textContent = Globalize.format(profit, c.format)
                    negative = profit < 0
                }
                toggleClass(e.cell, 'negative', negative);
            }
        });

    }

    if (Data) {
        return (
            <div className="Page">
                <FlexGrid initialized={init} itemsSource={Data}>
                    <FlexGridColumn binding="id" header="ID" width={100} isReadOnly={true} />
                    <FlexGridColumn binding="country" header="Country" visible={false} />
                    <FlexGridColumn binding="product" header="Product" />
                    <FlexGridColumn binding="sales" header="Sales" aggregate="Sum" format='n4' />
                    <FlexGridColumn binding="expenses" header="Expenses" aggregate="Sum" />
                    <FlexGridColumn binding="profit" header="Profit" dataType={2} isReadOnly={true} allowSorting={false} />
                </FlexGrid>
                <div>visible  是否显示列</div>
                <div>init.collapseGroupsToLevel(1) 折叠属性 (x) x 层级  0全部折叠 </div>
                <div>ÿþù</div>
            </div>
        )
    }

};

export default WijmoI04